﻿<!doctype html>
<html style="height:100%">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
<title>酒店地图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6B0lKIOMMPw5O8SG9Lwqv2Gz"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<link rel="stylesheet" href="<{$ipath}>minisite/hotel/css/base.css">
<style>
.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
#header{position:relative;background-color:#18d5d7;min-height: 2.6rem;width: 100%;text-align: center;border-bottom:1px solid #7fe3e5;}
#header.ulinenone{border-bottom:0;}
#header>div:first-child{margin-left:1.5rem;position:absolute;left: 0;top: 25%;z-index: 1;width: 1.8rem;height: 1.8rem;}
.back:before{display:block;content:"";width: 1.0rem;height: 1.0rem;transform:translate(0,-50%) rotate(45deg);-webkit-transform:translate(0,-50%) rotate(45deg);border:solid #fff;border-width:0 0 2px 2px;margin-top:50%;}
#header .title{color: #fff;font-size: 1.0rem;font-weight: bold;line-height: 2.6rem;}
.mappanel{position:fixed;bottom:0;right:0;width:100%;}
.mappanel ul{width:200px;height:45px;float:right;line-height:45px;background:#fff;}
.mappanel ul li{float:left;padding-left:15px;padding-right:15px;}
.mappanel ul li.active{background:#0075c7;color:#fff;}
.mappanel .map-result{position:absolute;width:100%;height:200px;overflow:auto;left:0;top:-200px;background:rgba(255,255,255,0.7);border:1px #18d5d7 solid;}
.mappanel .close{position:absolute;z-index:1;right:0;top:-215px;width:25px;height:25px;text-align:center;line-height:20px;border-radius:12px;background:#e5ecf9}
</style>
</head>
<body style="height:100%">
<header id="header" class="ulinenone">
    <div class="back" onclick="history.go(-1);"></div>
    <div class="title">酒店地图</div>
</header>
<div id="allmap" style="width:100%;height:100%">
</div>
<div class="mappanel">
    <div class="close">x</div>
    <div class="map-result" id="map-result">        
    </div>
	<ul class="clearfix">
	   <li class="active" t="walking">步行</li>
       <li t="driving">驾车</li>
       <li t="transit">公交</li>
	</ul>    
</div>
<script src="<{$ipath}>minisite/hotel/js/jquery.min.js"></script>
<script type="text/javascript">
/*	var map = new BMap.Map("allmap");
	var gpspoint = new BMap.Point(<{$hinfo.longitude}>,<{$hinfo.latitude}>);
	map.addControl(new BMap.NavigationControl());
	translateCallback = function (point){
		var marker = new BMap.Marker(point);
		map.addOverlay(marker);
		map.setCenter(point);
		map.centerAndZoom(point, 17);
	}
	BMap.Convertor.translate(gpspoint,0,translateCallback);*/

    var map = new BMap.Map("allmap");
    var point = new BMap.Point(<{$hinfo.longitude}>,<{$hinfo.latitude}>);
    map.centerAndZoom(point, 12);
    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);
    var mypoint = null;
    var endpoint = new BMap.Point(<{$hinfo.longitude}>,<{$hinfo.latitude}>);
    
	
$(function(){
    $(".mappanel .close").click(function(){
        $(".mappanel .map-result").hide();
        $(".mappanel .close").hide();        
    });
    $(".mappanel ul li").click(function(){
        $(".mappanel .map-result").show();
        $(".mappanel .close").show();
        if(mypoint==null||!mypoint) return;
        $(".mappanel ul li").removeClass("active");
        $(this).addClass("active");
        map.clearOverlays();
        switch($(this).attr("t")){
            case "walking":
                walkingFun();
            break;
            case "driving":
                drivingFun();
            break;
            case "transit":
                transitFun();
            break;
        }
    });
    
    function walkingFun(){
        var walking=new BMap.WalkingRoute(map,{renderOptions:{map:map,autoViewport:true,panel:"map-result"}});        
        walking.search(endpoint,mypoint);
    }
    function drivingFun(){
        var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport:true,panel:"map-result"}});
        driving.search(endpoint,mypoint);
    }
    function transitFun()    
    {
        var transit=new BMap.TransitRoute(map, {renderOptions:{map:map,autoViewport:true,panel:"map-result"}});
           transit.search(endpoint,mypoint);
    }
    var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			var mk = new BMap.Marker(r.point);
			//map.addOverlay(mk);
			//map.panTo(r.point);
			//alert('您的位置：'+r.point.lng+','+r.point.lat);
            mypoint=r.point;
		}
		else {
			alert('获取你的位置失败请稍后重试');
		}  
        $(".mappanel ul li:first").click();      
	},{enableHighAccuracy: true});
});
window.onload = function() { 
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == "micromessenger"){
        document.getElementById("header").style.display="none";
    }
}; 
</script>
</body>
</html>
